<template>
  <div class="gradient-text" :style="gradientStyle">
    {{ text }}
  </div>
</template>

<script>
export default {
  name: "GradientText",
  props: {
    text: {
      type: String,
      default: "山软智读 SDSE AIR"
    },
    fontSize: {
      type: String,
      default: "2.5em" // 可传 "1.5em", "24px", "3rem" 等
    }
  },
  data() {
    return {
      angle: 0,
      position: 0
    };
  },
  computed: {
    gradientStyle() {
      return {
        backgroundImage: `linear-gradient(${this.angle}deg, #193EFF 0%, #FF894E 25%, #995AFF 50%, #22AEFF 75%, #193EFF 100%)`,
        backgroundSize: '400% 100%',
        backgroundPosition: `${this.position}% 50%`,
        color: 'transparent',
        fontSize: this.fontSize,
        fontWeight: '700',
        backgroundClip: 'text',
        WebkitBackgroundClip: 'text',
        filter: 'drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)) brightness(1.3)',
        textRendering: 'optimizeLegibility',
        WebkitFontSmoothing: 'antialiased'
      };
    }
  },
  mounted() {
    this.animateGradient();
  },
  methods: {
    animateGradient() {
      let direction = 1;
      setInterval(() => {
        this.position = (this.position + 1) % 400;
        this.angle += direction * 0.3;
        if (this.angle >= 400 || this.angle <= 0) direction *= -1;
      }, 30); // 控制动画速度
    }
  }
};
</script>

<style scoped>
.gradient-text {
  display: inline-block;
}
</style>